<template>
  <!-- PAGE CONTENT BEGINS -->
  <div>
    <p>
      <button v-on:click="add()" class="btn btn-white btn-warning btn-round">
        <i class="ace-icon fa fa-edit bigger-120 blue"></i>
        新增
      </button>
      &nbsp;
      <button v-on:click="list(1)" class="btn btn-white btn-warning btn-round">
        <i class="ace-icon fa fa-refresh bigger-120 blue"></i>
        刷新
      </button>
    </p>
    <pagination ref="pagination" v-bind:list="list"></pagination>

    <div class="row">
      <div v-for="teacher in teachers" :key="teacher.num" class="col-xs-12 col-sm-3">
        <div>
				<span class="profile-picture">
          <span class="search-promotion label label-primary arrowed-in arrowed-in">
            {{ teacher.id }}
          </span>
					<img v-show="!teacher.image" class="editable img-responsive editable-click editable-empty" alt="头像"
               src="/static/image/teacherbase.jpg">
					<img v-show="teacher.image" class="editable img-responsive editable-click editable-empty" alt="头像"
               v-bind:src=teacher.image>
				</span>

          <div class="space-4"></div>

          <div class="width-85 label label-info label-xlg arrowed-in arrowed-in-right">
            <div class="inline position-relative">
              <a href="#" class="user-title-label dropdown-toggle" data-toggle="dropdown">
                <span class="white">{{ teacher.name }}</span>
              </a>
            </div>
          </div>
        </div>

        <!--        <td> {{ teacher.intro }}</td>-->
        <div class="space-6"></div>

        <div class="profile-contact-info">
          <div class="profile-contact-links align-left">
            <a href="#" class="btn btn-link">
              <i class="ace-icon fa fa-user bigger-120 green"></i>
              昵称:&nbsp;&nbsp;{{ teacher.nickname }}
            </a><br>

            <a href="#" class="btn btn-link">
              <i class="ace-icon fa fa-hand-paper-o bigger-120 pink"></i>
              职位：
              <span class="pull-right label label-purple info-label">
                {{ teacher.position }}
              </span>
            </a><br>
          </div>
          <div class="space-6"></div>
          <div class="profile-contact-links align-left">
            <span class="pull-left label label-info info-label">
              座右铭
            </span><br>
            <a>{{ teacher.motto }}</a>
          </div>
          <div class="space-6"></div>
          <div class="profile-contact-links align-left">
            <span class="pull-left label label-info info-label">
              简介
            </span><br>
            <div class="dropdown" >
              <a class="intro dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                {{ teacher.intro }}
                <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <a>{{ teacher.intro }}</a>
              </ul>
            </div>
          </div>
          <div class="space-6"></div>
          <div class="hidden-sm hidden-xs btn-group">
            <button v-on:click="edit(teacher)" class="btn btn-xs btn-info">
              <i class="ace-icon fa fa-pencil bigger-120"></i>编辑
            </button>
            <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">
              <i class="ace-icon fa fa-trash-o bigger-120"></i>删除
            </button>
          </div>
        </div>
        <div class="hr hr16 dotted"></div>
      </div>

    </div>

    <!--    <table id="simple-table" class="table  table-bordered table-hover">-->
    <!--      <thead>-->
    <!--      <tr>-->
    <!--        <th> ID</th>-->
    <!--        <th> 姓名</th>-->
    <!--        <th> 昵称</th>-->
    <!--        <th> 头像</th>-->
    <!--        <th> 职位</th>-->
    <!--        <th> 座右铭</th>-->
    <!--        <th> 简介</th>-->
    <!--        <th>操作</th>-->
    <!--      </tr>-->
    <!--      </thead>-->
    <!--      <tbody>-->
    <!--      <tr v-for="teacher in teachers" :key="teacher.num">-->
    <!--        <td> {{ teacher.id }}</td>-->
    <!--        <td> {{ teacher.name }}</td>-->
    <!--        <td> {{ teacher.nickname }}</td>-->
    <!--        <td> {{ teacher.image }}</td>-->
    <!--        <td> {{ teacher.position }}</td>-->
    <!--        <td> {{ teacher.motto }}</td>-->
    <!--        <td> {{ teacher.intro }}</td>-->
    <!--        <td>-->
    <!--          <div class="hidden-sm hidden-xs btn-group">-->
    <!--            <button v-on:click="edit(teacher)" class="btn btn-xs btn-info">-->
    <!--              <i class="ace-icon fa fa-pencil bigger-120"></i>-->
    <!--            </button>-->

    <!--            <button v-on:click="del(teacher.id)" class="btn btn-xs btn-danger">-->
    <!--              <i class="ace-icon fa fa-trash-o bigger-120"></i>-->
    <!--            </button>-->
    <!--          </div>-->

    <!--          <div class="hidden-md hidden-lg">-->
    <!--            <div class="inline pos-rel">-->
    <!--              <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">-->
    <!--                <i class="ace-icon fa fa-cog icon-only bigger-110"></i>-->
    <!--              </button>-->

    <!--              <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">-->
    <!--                <li>-->
    <!--                  <a href="#" class="tooltip-info" data-rel="tooltip" title="View">-->
    <!--                    <span class="blue">-->
    <!--                      <i class="ace-icon fa fa-search-plus bigger-120"></i>-->
    <!--                    </span>-->
    <!--                  </a>-->
    <!--                </li>-->

    <!--                <li>-->
    <!--                  <a href="#" class="tooltip-success" data-rel="tooltip" title="Edit">-->
    <!--                    <span class="green">-->
    <!--                      <i class="ace-icon fa fa-pencil-square-o bigger-120"></i>-->
    <!--                    </span>-->
    <!--                  </a>-->
    <!--                </li>-->

    <!--                <li>-->
    <!--                  <a href="#" class="tooltip-error" data-rel="tooltip" title="Delete">-->
    <!--                    <span class="red">-->
    <!--                      <i class="ace-icon fa fa-trash-o bigger-120"></i>-->
    <!--                    </span>-->
    <!--                  </a>-->
    <!--                </li>-->
    <!--              </ul>-->
    <!--            </div>-->
    <!--          </div>-->
    <!--        </td>-->
    <!--      </tr>-->
    <!--      </tbody>-->
    <!--    </table>-->
    <!--模态框-->
    <div class="modal fade" id="myFormModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">表单</h4>
          </div>
          <div class="modal-body">
            <!--表格-->
            <form class="form-horizontal">
              <div class="form-group">
                <label class="col-sm-2 control-label">姓名</label>
                <div class="col-sm-10">
                  <input v-model="teacher.name" class="form-control" placeholder="输入姓名"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">昵称</label>
                <div class="col-sm-10">
                  <input v-model="teacher.nickname" class="form-control" placeholder="输入昵称"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">头像</label>
                <div class="col-sm-10">
                  <big-file v-bind:suffixs=" [ 'jpg','png','jpeg' ] "
                        v-bind:use="FILE_USE.TEACHER.key"
                        v-bind:text="'上传头像'"
                        v-bind:after-upload="afterUpload"
                        v-bind:input-id=" 'image-upload' "></big-file>
                  <div v-show="teacher.image" class="row">
                    <div class="col-md-4">
                      <img v-bind:src="teacher.image" class="img-responsive">
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">职位</label>
                <div class="col-sm-10">
                  <input v-model="teacher.position" class="form-control" placeholder="输入职位"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">座右铭</label>
                <div class="col-sm-10">
                  <input v-model="teacher.motto" class="form-control" placeholder="输入座右铭"/>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">简介</label>
                <div class="col-sm-10">
                  <textarea v-model="teacher.intro" class="form-control" placeholder="输入简介" rows="5"/>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            <button type="button" class="btn btn-primary" v-on:click="save()">保存</button>
          </div>
        </div><!-- /.modal-content-->
      </div><!-- /.modal-dialog-->
    </div><!-- /.modal-->
  </div>
</template>
<script>
import Pagination from "../../components/paginations";
import BigFile from "../../components/big-file";

export default {
  name: 'business-teacher',
  components: {BigFile, Pagination},
  data: function () {
    return {
      //映射表单数据
      teacher: {},
      teachers: [],
      FILE_USE:FILE_USE,
    }
  },
  mounted: function () {
    let _this = this;
    _this.$parent.activeSidebar("business-teacher-sidebar");
    _this.list(1);
  },
  methods: {

    add() {
      let _this = this;
      _this.teacher = {};
      $("#myFormModal").modal("show");
    },

    edit(teacher) {
      let _this = this;
      _this.teacher = $.extend({}, teacher);
      $("#myFormModal").modal("show");
    },
    /**查询*/
    list(page) {
      let _this = this;
      Loading.show();
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/list', {
        page: page,
        size: _this.$refs.pagination.size,
      }).then((response) => {
        Loading.hide();
        console.log("查询讲师列表结果：", response);
        let resp = response.data;
        _this.teachers = resp.content.list;
        _this.$refs.pagination.render(page, resp.content.total);
      })
    },
    /**保存*/
    save() {
      let _this = this;
      /**保存校验*/
      if (1 != 1
          || !Validator.require(_this.teacher.name, "姓名")
          || !Validator.length(_this.teacher.name, "姓名", 1, 50)
          || !Validator.length(_this.teacher.nickname, "昵称", 1, 50)
          || !Validator.length(_this.teacher.image, "头像", 1, 100)
          || !Validator.length(_this.teacher.position, "职位", 1, 50)
          || !Validator.length(_this.teacher.motto, "座右铭", 1, 50)
          || !Validator.length(_this.teacher.intro, "简介", 1, 500)
      ) {
        return;
      }
      _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/admin/teacher/save', _this.teacher)
          .then((response) => {
            console.log("保存讲师列表结果：", response);
            let resp = response.data;
            if (resp.success) {
              $("#myFormModal").modal("hide");
              _this.list(1);
              toast.success("保存成功！");
            } else {
              toast.warning(resp.message);
            }


          })
    },
    /**删除*/
    del(id) {
      let _this = this;
      //弹出框
      Confirm.show("删除讲师后不可恢复，您是否检查删除!", function () {
        _this.$ajax.delete(process.env.VUE_APP_SERVER + '/business/admin/teacher/delete/' + id)
            .then((response) => {
              console.log("删除讲师列表结果：", response);
              let resp = response.data;
              if (resp.success) {
                _this.list(1);
                toast.success("删除成功！");
              }
            });
      })
    },
    /**上传组件执行后回调函数*/
    afterUpload(resp) {
      let _this = this;
      let image = resp.content.path;
      _this.teacher.image = image;
    }
  }
}


</script>
<style scoped>
.caption h3 {
  font-size: 20px;
}
.intro{
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display:block;
}

@media (max-width: 1199px) {
  .caption h3 {
    font-size: 16px;
  }
}

</style>